### About

> Mask is `reversed` HTML with little CSS and JavaScript syntax. But not the syntax is the key point of the MaskJS - but the performance: the way how the Parser works, how the Builder creates a Shadow DOM and then inserts into the live DOM - these all make the application start up significant faster then any other approach. Also, worth to mention, the Parser works same on Node.js and a modified Builder creates the Shadow DOM-alike AST, and then renders HTML. And the 2-Phase initialization of a Component allows it to be truly isomorphic.

----

##### ☰
- `1` [Comments](#1-comments)
- `2` [Literals](#2-literals)
- `3` [Nodes](#3-tags-components)
	- `3.1` [Declaration](#31-declaration)
	- `3.2` [Attributes](#32-attributes)
	- `3.3` [Expression](#33-expression)
- `4` [ChildNodes](#4-childnodes)
- `5` [Custom Syntax](#5-custom-syntax)
	- `5.1` [`script`](#51-script)
	- `5.2` [`style`](#52-style)
	- `5.3` [`function`](#53-function)
	- `5.4` [`event`](#54-event)
	- `5.5` [`slot`](#55-slot)
	- `5.6` [`var`](#56-slot)

### `1` Comments
```mask
// single line comment
/*
  Multiline comment
*/
```

### `2` Literals
```mask
'Foo'
"Foo"
"""
  Multiline with any '"' inside
"""
'''
  Multiline with any '"' inside
'''
```


### `3` Tags / Components
#### `3.1` Declaration
```html
<!-- html -->
<div id='foo' class='bar qux' name='quux' hidden></div>
```
```mask
// mask
div id='foo' class='bar qux' name='quux' hidden;
```
Pretty similar, right? Any formatting possible in HTML, is also possible in Mask: new lines, spaces, etc.

- `sugar` For the `id` and `class` attributes can be used CSS syntax: `#id`, `.class`

	```mask
	div#foo.bar.qux name='quux' hidden;
	```

- `sugar` If a tag begins with `#id` or `.class`, the the tag name can be omitted. Mask Parser will guess the tagName. Default is `div`, inside `ul` the guessed tagName is `li`, and so on.

	```mask
	#foo.bar.qux name='quux' hidden;
	```

#### `3.2` Attributes
Like in HTML:
- `'` and `"` are used for values,
- When attributes value contains no whitespace, quotes are not required.
- Attributes value is also not required, like in HTML.
- Attributes value can contain new lines
```mask
section
	name=foo
	style = '
		border: 1px solid green;
		background: url("foo.png") no-repeat;
	';
```

#### `3.3` Expression
A node can have an expression enclosed in Parentheses `()`, and the syntax inside depends on the particular node type
```
log (foo.name);
```


### `4` Childnodes
- **No childnodes**. As from examples above, if a tag has no children, it should be closed with `;` _`(semicolon)`_.

- **Childnodes**. To define children of a tag, `{}` _`(brackets)`_ blocks are used, _just like in JS, CSS, LESS, etc_.
	```html
	<section>
		<input type='text' placeholder='Lorem ipsum' />
		<input
			type = submit
			value = 'Do some work' />
	</section>
	```
	```mask
	section {
		input type='text' placeholder='Lorem ipsum';
		input
			type = submit
			value = 'Do some work' ;
	}
	```
- `sugar` _`(Better readability)`_ You can use `>` (like in CSS) if a node has only one child.

	```html
	<div class='dialog-backdrop'>
		<div class='dialog-panel'>
			<header>
				Hello
			</header>
			<section>
				<img src='/baz.png' />
			</section>
		</div>
	</div>
	```
	```mask
	// blocks
	.dialog-backdrop {
		.dialog-panel {
			header  {
				'Hello'
			}
			section {
				img src='/baz.png';
			}
		}
	}
	```
	```mask
	.dialog-backdrop > .dialog-panel {
		header  > 'Hello'
		section > img src='/baz.png';
	}
	```

### `5` Custom Syntax
There are Node Handlers, which implement some custom syntax parsing.

#### `5.1` Script
```mask
script {
	console.log('That is javascript');
}
```

#### `5.2` Style
```mask
style {
	#foo {
		background: red;
	}
}
```

#### `5.3` Function
```mask
function barQux (txt) {
	console.log(txt);
}
```

#### `5.4` Event
```mask
button {
	event click (event) {
		event.currentTarget.style.display = 'none';
	}
}
```

#### `5.5` Slot
```mask
slot logSelf () {
	console.log(this);
}

button x-tap='logSelf' >
	'Print component to the console'
```

#### `5.6` Slot
```mask
var myArr = [1, 2, 3, 4];

ul > each(myArr) > 'Number: ~[.]'
```

----
:checkered_flag: